/* ==========================================================================
   Grund-Styles
   ========================================================================== */

html {
    overflow-y: scroll;
}

body {
    margin: 0 auto;
}

/* Links */
a {
    text-decoration: underline;
    color: $color-font-link;
    cursor: pointer;
    &:visited {
        text-decoration: none;
        color: $color-font-link;
    }
    &:active {
        color: $color-font-link;
        outline: none;
    }
    &:hover {
        color: $color-font-link-hover;
        text-decoration: underline;
        outline: none;
    }
}


/* code-anzeige */
pre {
    background: $color-bg-base;
    padding: $magic-number-half-unit;
    white-space: pre-wrap;
    word-wrap: break-word;
    @include border-def;
}


/* Listen */
ul, ol {
    margin: $magic-number-unit 0 $magic-number-unit $magic-number-double-unit;
    ul, ol {
        margin-bottom: 0;
        margin-top: 0;
    }
}
ol {
    list-style-type: decimal;
}

/* Tabellen */
table {
    border-left: 1px solid $color-border;
    border-right: 1px solid $color-border;
    tr:nth-child(even) {
        background: $color-bg-base;
    }
    td, th {
        text-align: left;
        border-bottom: 1px solid $color-border;
        padding: $magic-number-quarter-unit $magic-number-half-unit;
        vertical-align: top;
        img {
            vertical-align: top;
        }
    }
    tr:first-child td {
        border-top: 1px solid $color-border;
    }
    thead {
        th {
            border-width: 3px;
            border-top: 1px solid $color-border;
        }
    }
    // TODO: soll es dafuer auch eine Media-Query-Version geben?
}


/* Footer */
footer {
    margin-top: $magic-number-unit;
    text-align: center;
    a {
        display: inline-block;
        padding: $magic-number-half-unit;
    }
}



strong, th {
    font-weight: bold;
}

sub {
    vertical-align: sub;
    font-size: smaller;
}

sup {
    vertical-align: super;
    font-size: smaller;
}

p {
    margin: $magic-number-unit 0;
}

hr {
    display: block;
    height: 1px;
    margin: 1em 0;
    padding: 0;
}

ins {
    background-color: $color-bg-error;
    color: $color-font-contrast;
    text-decoration: none;
}

mark {
    background-color: $color-bg-error;
    color: $color-font-contrast;
    font-style: italic;
    font-weight: bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}

textarea {
    overflow: auto;
}

/* thnx ivannikolic! www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */
textarea {
    overflow: auto;
}

.ie6, .ie7 {
    legend {
        margin-left: -7px;
    }
}

/* bringt Checkboxen, Radio Buttons, Text-Felder, und die zugehörige Labels in eine Reihe
   by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css  */
input[type="radio"] {
    vertical-align: text-bottom;
}
input[type="checkbox"] {
    vertical-align: bottom;
}
.ie7 input[type="checkbox"] {
    vertical-align: baseline;
}
.ie6 input {
    vertical-align: text-bottom;
}

/* Hand-Cursor über klickbaren Eingabe-Elementen */
label, input[type=button], input[type=submit], button {
    cursor: pointer;
}

/* Webkit-Browser fügen einen 2px-Außenabstand um den äußeren Bereich von Formular-Elementen hinzu */
button, input, select, textarea {
    margin: 0;
}

/* sauber agierende Buttons im IE:
   www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
button {
    width: auto;
    overflow: visible;
}

/* Bikubische-Skalierung für nicht-native Bildgrößen im IMG-Tag:
   code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
.ie7 img {
    -ms-interpolation-mode: bicubic;
}



/* Schriften-Definitionen
   ========================================================================== */

body {
    color: $color-font;
    font: $font-size-unit $font-family;
    line-height: $line-height-unit;
    *font-size: small;
}
select, input, textarea, button {
    font: 99% $font-family;
}
pre, code, kbd, samp {
    font-family: $font-family-fixed;
}


small {
    font-size: 85%;
}

// Ueberschriften
// ====================
h1, h2, h3, h4, h5, h6 {
    margin: $magic-number-unit 0;
    font-weight: bold;
}
h1 {
    @include font-size-heading(24)
}

h2 {
    @include font-size-heading(22)
}

h3 {
    @include font-size-heading(20)
}

h4 {
    @include font-size-heading(18)
}

h5, h6 {
    @include font-size-heading(16)
}






/* ==========================================================================
   Semantische Hilfsklassen
   ========================================================================== */

/* Rahmen */
.border-all,
.border-top,
.border-right,
.border-bottom,
.border-left {
    @include border-def;
    @include clearfix;
}
.border-top {
    border-width: 1px 0 0;
}
.border-right {
    border-width: 0 1px 0 0;
}
.border-bottom {
    border-width: 0 0 1px;
}
.border-left {
    border-width: 0 0 0 1px;
}

/* Text-Ausrichtung */
.text-rtl {
    text-align: right;
}

/* Breiten-Angaben */
.width-25,
.width-33,
.width-50,
.width-66,
.width-75 {
    float: left;
}
.width-25 {
    width: 25%;
}
.width-33 {
    width: 33.333%;
}
.width-50 {
    width: 50%;
}
.width-66 {
    width: 66.666%;
}
.width-75 {
    width: 75%;
}

/* Innenabstaende */
.padding-all {
    padding:  $magic-number-half-unit;
}
.padding-t { padding-top: $magic-number-half-unit; }
.padding-r { padding-right: $magic-number-half-unit; }
.padding-b { padding-bottom: $magic-number-half-unit; }
.padding-l { padding-left: $magic-number-half-unit; }
.padding-lr {
    @inherit .padding-l;
    @inherit .padding-r;
}
.padding-tb {
    @inherit .padding-t;
    @inherit .padding-b;
}








/* ==========================================================================
   Nicht-semantische Hilfsklassen
   ========================================================================== */

/* um Grafiken zu ersetzen */
.ir {
    display: block;
    text-indent: -999em;
    overflow: hidden;
    background-repeat: no-repeat;
    text-align: left;
    direction: ltr;
}

/* Zum verstecken in beidem, Browser sowie Screenreader
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden {
    display: none;
    visibility: hidden;
}

/* Optisch versteckt, aber mit Screenreader lesbar
   www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden  */
.visuallyhidden {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}

/* Optisch verstecken (auch von Screenreader), aber behalte den Platz im Layout */
.invisible {
    visibility: hidden;
}

/* >> Der glorreiche CLEARFIX: Aktualisiert, um einen Einsturz der Außenabstände in Kind-Elementen zu verhindern << j.mp/bestclearfix */
.clearfix {
    @include clearfix;
}